<script setup lang="tsx">

import {useAppStore} from "@/store/modules/app";
import {useTable, useTableOperate} from "@/hooks/common/table";

defineOptions({name: 'FlatTable'})

interface Props {
  title: string
  config: any
  refresh: ()=>{}
}

const props = defineProps<Props>()

interface Emits {
  (e: 'rowClick'): (row:any) =>{}
}

const emit = defineEmits<Emits>()

const appStore = useAppStore()

const {
  columns,
  columnChecks,
  data,
  getData,
  getDataByPage,
  loading,
  mobilePagination,
  searchParams,
  resetSearchParams,
  updateSearchParams,
} = useTable(props.config);

const {
  drawerVisible,
  operateType,
  editingData,
  handleAdd,
  handleEdit,
  checkedRowKeys,
  onDeleted
} = useTableOperate(data, getData);

const gotoPage = (params: any) => {
  console.log('click update search')
  updateSearchParams(params)
  getData()
}

const rowClick = (row:any, _:number) => {
  return {
    onClick: () => {
      emit('rowClick', row)
    }
  }
}

defineExpose({
  gotoPage
})

</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard :title="props.title" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :disabled-delete="checkedRowKeys.length === 0"
          :loading="loading"
          @refresh="getData"
        />
      </template>
      <NDataTable
        @refresh="getData"
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="962"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
        :row-props="rowClick"
      />
    </NCard>
  </div>
</template>

<style scoped>

</style>
